<template>
	<view class="tabbar-1">
		<view class="box" @click="info">
			<view><image src="../../static/morepeople.png" style="width:50px;height:50px;border-radius:50%;" /></view>
			<view style="margin-left:10px;">
				<view style="font-size:16px;margin:5px 0 0 0;">多人群聊</view>
				<view style="font-size:14px;color:#999;">点击进行会话</view>
			</view>
			<view class="top">
				<span>置顶</span>
			</view>
		</view>
		<view v-for="item in friends" class="box" @click="info(item.friendId, item.friendName)">
			<view><image src="../../static/morepeople.png" style="width:50px;height:50px;border-radius:50%;" /></view>
			<view style="margin-left:10px;">
				<view style="font-size:16px;margin:5px 0 0 0;">{{item.friendName}}</view>
				<view style="font-size:14px;color:#999;">点击进行聊天</view>
			</view>
		</view>
		
		<view class="call">欢迎用户{{ this.name }}使用Socket服务</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '',
			id: '',
			friends: [{
				
			}]
		};
	},
	methods: {
		// navigate
		info(id, name) {
			uni.navigateTo({
				url: `singleChat?id=${id}&name=${name}`
			});
		},
		async getFriends(id) {
			let token = uni.getStorageSync("token")
			const res = await this.$myRequest({
				url: `/intern/chat-friends/getFriends/${this.id}`,
				methods: 'get',
				token: token
			})
			console.log(res.data)
			this.friends = res.data.data.friends
			
		}
	},
	onLoad() {
		this.name = uni.getStorageSync('name');
		this.id = uni.getStorageSync("id");
		this.getFriends(this.id)
	},
};
</script>

<style>
.box {
	border-bottom: 1px solid #f8f8f8;
	padding: 5px 10px 5px 10px;
}
.box {
	display: flex;
	flex-wrap: nowrap;
	justify-content: start;
}
.call {
	font-size: 12px;
	color: #999;
	text-align: center;
	margin-top: 20px;
	letter-spacing: 1px;
}
.top{
	font-size:12px;
	color:#DD524D;
	width:50%;
	text-align:right;
}
.top span{
	border:1px solid #DD524D;
	display:inline-block;
	padding:2px 7px 2px 7px;
	border-radius:7px;
	margin-top:8px;
}
</style>
